<template>
	<view class="index-container">
		<!-- <nav-header :show-back="false" title="榔头简历">
			<view class="search-bar">
				<text>添加小程序，求职快人一步 ></text>
			</view>
		</nav-header> -->
		
		<view class="content">
		<!-- <view class="content" :style="{ paddingTop: statusBarHeight + 44 + 'px' }"> -->
			<!-- Banner -->
			<view class="banner">
				<view class="banner-content">
					<view class="resume-icon">
						<image src="/static/resume-icon.png" mode="aspectFit"></image>
					</view>
					<view class="banner-text">
						<view class="main-text">一种方式</view>
						<!-- <view class="main-text">两种方式</view> -->
						<view class="sub-text">随心制作简历</view>
						<view class="action-text">直接创作</view>
						<!-- <view class="action-text">直接创作/导入简历</view> -->
					</view>
				</view>
			</view>
			
			<!-- Stats -->
			<view class="stats">
				<text>服务用户: {{ formatNumber(stats.userCount) }}</text>
				<text class="divider">|</text>
				<text>帮助制作简历: {{ formatNumber(stats.resumeCount) }}</text>
			</view>
						
			<!-- Template Creation -->
			<view class="creation-box">
				<view class="creation-box-content">
					<view class="create-btn-add" @click="createResume">
						<text>制作</text>
						<u-icon name="edit-pen" color="#000"></u-icon>
					</view>
					<view class="create-btn-all" @click="handleAllResume">
						<text>查看全部</text>
						<view class="all-resume-icon">📄</view>
					</view>
				</view>
				<view class="creation-box-list">
					<template v-if="resumeList.length > 0">
						<view class="creation-box-list-item" v-for="item in resumeList" :key="item.resumeId" @click="openDetail(item.resumeId)">
							<!-- <view class="creation-box-list-item-img">
								<image :src="item.resumeImg || '/static/resume-icon.png'" mode="aspectFit"></image>
							</view> -->
							<view class="creation-box-list-item-text">
								<view class="resume-title">{{ item.resumeName }}</view>
								<view class="resume-info">{{ item.targetPosition }}</view>
								<view class="resume-time">创建时间：{{ item.createTime }}</view>
							</view>
							<view class="creation-box-list-actions">
								<view class="resume-more-text" @click="goInterview(resume)">AI模拟面试</view>

								<!-- <view class="action-btn" @click.stop="goInterview(item)">
									<u-icon name="chat" color="#3b66c4" size="18"></u-icon>
								</view> -->
								<view class="action-btn" @click.stop="openMorePopup(item, resumeList.indexOf(item))">
									<u-icon name="more-dot-fill" color="#666" size="18"></u-icon>
								</view>
							</view>
						</view>
					</template>
					<view v-else-if="isLoading" class="creation-box-empty">
						<!-- <u-loading size="28" mode="circle"></u-loading> -->
						<text>加载中...</text>
					</view>
					<view v-else class="creation-box-empty">
						<u-icon name="file-text" size="50" color="#ddd"></u-icon>
						<text>暂无简历，点击"制作"创建新简历</text>
					</view>
				</view>
			</view>
			<!-- <view class="creation-box">
				<view class="create-icon" @click="createResume">
					<view class=""><image src="/static/wj.png" mode="aspectFit"></image></view>
					<view class="create-btn">
						<text>制作</text>
						<u-icon name="edit-pen" color="#fff"></u-icon>
					</view>
				</view>
				<view class="resume-list-showcase" v-if="resumeList.length">
					<swiper
						class="resume-swiper"
						:current="resumeIndex"
						@change="onResumeChange"
						circular
						:indicator-dots="false"
						:autoplay="false"
						:duration="300"
					>
						<swiper-item v-for="(resume, idx) in resumeListWithAll" :key="resume.resumeId || resume.id || idx">
							<view v-if="!resume.isAll" class="resume-item" style="position:relative;">
								<view @click="openDetail(resume.resumeId)">
									<view class="resume-title">{{ resume.resumeName }}</view>
									<view class="resume-info">{{ resume.targetPosition }}</view>
									<view class="resume-time">创建时间：{{ resume.createTime }}</view>
								</view>
								<view class="resume-more">
									<view class="resume-more-text" @click="goInterview(resume)">AI模拟面试</view>
									<u-icon name="more-dot-fill" size="24" @click.stop="openMorePopup(resume,idx)"></u-icon>
								</view>
							</view>
							<view v-else class="resume-item all-resume-item" @click="handleAllResume">
								<view class="all-resume-icon">📄</view>
								<view class="all-resume-text">全部简历</view>
							</view>
						</swiper-item>
					</swiper>
				</view>
				<view v-else class="resume-list-empty">暂无简历</view>
			</view> -->
      
			<!-- Category Tabs -->
			<!-- <view class="category-tabs">
				<view 
					class="tab-item" 
					:class="{ 'active': currentCategory === 'all' }" 
					@click="setCategory('all')"
				>
					<text>全部</text>
					<text class="count">7,807</text>
				</view>
				<view 
					class="tab-item" 
					:class="{ 'active': currentCategory === 'new' }"
					@click="setCategory('new')"
				>
					<text>最新</text>
					<text class="count">12</text>
				</view>
				<view 
					class="tab-item" 
					:class="{ 'active': currentCategory === 'vip' }"
					@click="setCategory('vip')"
				>
					<text>VIP</text>
					<text class="count">31</text>
				</view>
				<view 
					class="tab-item" 
					:class="{ 'active': currentCategory === 'favorite' }"
					@click="setCategory('favorite')"
				>
					<text>收藏</text>
					<text class="count">0</text>
				</view>
			</view> -->
			
			<!-- Action Buttons -->
			<!-- <view class="action-buttons">
				<view 
					class="recommendation-btn" 
					:class="{ 'active': currentFilter === 'recommended' }"
					@click="setFilter('recommended')"
				>
					<view class="heart-icon">❤️</view>
					<text>推荐</text>
				</view>
				<view 
					class="unlock-btn" 
					:class="{ 'active': currentFilter === 'premium' }"
					@click="setFilter('premium')"
				>
					<view class="unlock-icon">🔑</view>
					<text>解锁高颜值模板</text>
				</view>
				<view 
					class="popular-btn" 
					:class="{ 'active': currentFilter === 'popular' }"
					@click="setFilter('popular')"
				>
					<view class="popular-icon">🌐</view>
					<text>互联网人都爱用</text>
				</view>
			</view> -->
			
			<!-- Recommended Templates -->
			<!-- <view class="templates">
				<view class="template-grid">
					<view 
						class="template-item" 
						v-for="template in filteredTemplates" 
						:key="template.id"
						@click="navigateToDetail(template.id)"
					>
						<image src="/static/wj.png" mode="aspectFill"></image>
						<view class="template-label">
							<text>{{ template.title }}</text>
							<view class="template-tags">
								<text class="tag">{{ template.level }}</text>
								<text class="tag">{{ template.author }}</text>
							</view>
						</view>
					</view>
				</view>
			</view> -->
		</view>
	</view>
	
	<u-popup :show="showMorePopup" :round="10" mode="bottom" :closeOnClickOverlay="true" :closeable="true" @close="closeMorePopup">
		<view class="popup-content">
			<view class="popup-title">更多设置</view>
			<view class="popup-card">
				<text>简历名称：</text>
				<u-input style="margin-top: 20px;" v-model="editResumeName" @blur="handleEditName" placeholder="请输入简历名称" />
			</view>
			<view class="popup-actions">
				<view @click="handlePreview" class="marbtn">
					<uni-icons type="eye" size="18"></uni-icons>
					预览简历
				</view>
				<!-- <view @click="handleCopy" class="marbtn">复制</view> -->
				<view @click="handleDelete" class="danger">
					<uni-icons type="trash" size="18"></uni-icons>
					删除简历
				</view>
			</view>
		</view>
	</u-popup>
</template>

<script setup>
	import { ref, computed, onMounted } from 'vue'
	import { onShow } from '@dcloudio/uni-app'
	import { getToken } from '@/utils/auth'
	import { useTemplateStore } from '@/store/template.js'
	import NavHeader from '@/components/nav-header.vue'
	import { getResumeList, modifyResumeList } from '@/api/interview'
	import {
		useResumeStore
	} from '@/store/resume.js'
	import { deleteResume } from '@/api/my/resume'
	
	const resumeStore = useResumeStore()
	const templateStore = useTemplateStore()
	const statusBarHeight = ref(20)
	const currentCategory = ref('all')
	const currentFilter = ref('recommended')
	
	// 统计数据
	const stats = ref({
		userCount: 316,
		resumeCount: 1262
	})
	
	// 模板数据
	const templates = ref([
		{
			id: '1',
			title: '初级Java冰清简历模板',
			thumbnail: '/static/template1.jpg',
			level: '初级(1-3年)',
			author: '沐清',
			isVip: false,
			isNew: true,
			isRecommended: true,
			isPremium: false,
			isPopular: true,
			category: 'java'
		},
		{
			id: '2',
			title: '实习生Java面简历模板',
			thumbnail: '/static/template2.jpg',
			level: '实习生(应届)',
			author: '沐清',
			isVip: false,
			isNew: true,
			isRecommended: true,
			isPremium: false,
			isPopular: true,
			category: 'java'
		},
		{
			id: '3',
			title: '高级前端开发简历模板',
			thumbnail: '/static/template3.jpg',
			level: '高级(5年+)',
			author: '简历大师',
			isVip: true,
			isNew: false,
			isRecommended: false,
			isPremium: true,
			isPopular: true,
			category: 'frontend'
		},
		{
			id: '4',
			title: '产品经理简历模板',
			thumbnail: '/static/template4.jpg',
			level: '中级(3-5年)',
			author: '简历大师',
			isVip: true,
			isNew: false,
			isRecommended: false,
			isPremium: true,
			isPopular: false,
			category: 'product'
		}
	])
	
	// 过滤和分类模板
	const filteredTemplates = computed(() => {
		let result = templates.value
		
		// 先按照分类筛选
		if (currentCategory.value !== 'all') {
			switch (currentCategory.value) {
				case 'new':
					result = result.filter(t => t.isNew)
					break
				case 'vip':
					result = result.filter(t => t.isVip)
					break
				case 'favorite':
					result = result.filter(t => t.isFavorite)
					break
			}
		}
		
		// 再按照过滤条件筛选
		if (currentFilter.value !== 'all') {
			switch (currentFilter.value) {
				case 'recommended':
					result = result.filter(t => t.isRecommended)
					break
				case 'premium':
					result = result.filter(t => t.isPremium)
					break
				case 'popular':
					result = result.filter(t => t.isPopular)
					break
			}
		}
		
		return result
	})

	const createResume = () => {
		if(!getToken()){
			uni.showToast({
				title: '请先登录',
				icon: 'none'
			})
			return
		}
		resumeStore.resumeId = null
		uni.navigateTo({
			url: '/pages/resume/edit/index'
		})
	}

	const resumeList = ref([])
	const resumeIndex = ref(0)
	const showMorePopup = ref(false)
	const editResumeName = ref('')
	const currentResumeIdx = ref(-1)
	const isLoading = ref(false)

	const resumeListWithAll = computed(() => {
		return [...resumeList.value, { isAll: true }]
	})

	const fetchResumeList = async () => {
		try {
			isLoading.value = true
			const userId = uni.getStorageSync('loginInfo').user.userId
			const res = await getResumeList({ userId })
			if (res.code === 200 && res.rows && res.rows.length > 0) {
				resumeList.value = res.rows
				// resumeList.value = res.rows.slice(0, 1)
			} else {
				resumeList.value = []
			}
		} catch (e) {
			resumeList.value = []
		} finally {
			isLoading.value = false
		}
	}

	const openDetail = (id) => {
		resumeStore.resumeId = id
		uni.navigateTo({ url: `/pages/resume/edit/index?id=${id}` })
	}

	const onResumeChange = (e) => {
		resumeIndex.value = e.detail.current
	}

	const goInterview = (obj) => {
		uni.navigateTo({
			url: `/pages/interview/question?resumeId=${obj.resumeId}`
		})
	}

	const openMorePopup = (obj,idx) => {
		console.log(resumeListWithAll.value[idx], 'resumeListWithAll.value[idx]')
		currentResumeIdx.value = idx
		if (!resumeListWithAll.value[idx].isAll) {
			editResumeName.value = resumeListWithAll.value[idx].resumeName || resumeListWithAll.value[idx].name
		}
		showMorePopup.value = true
	}
	const closeMorePopup = () => {
		showMorePopup.value = false
	}
	const handlePreview = () => {
		const resume = resumeListWithAll.value[currentResumeIdx.value]
		uni.navigateTo({ url: `/pages/resume/preview?id=${resume.resumeId}` })
		closeMorePopup()
	}
	const handleCopy = () => {
		// 复制逻辑
		closeMorePopup()
	}
	const handleDelete = async () => {
		// 删除逻辑
		const res = await deleteResume(resumeListWithAll.value[currentResumeIdx.value].resumeId)
		if (res.code==200) {
			resumeListWithAll.value.splice(currentResumeIdx.value, 1)
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			})
			closeMorePopup()
		}else{
			uni.showToast({
				title: res.msg,
				icon: 'none'
			})
		}
	}
	const handleEditName = async (val) => {
		editResumeName.value = val
		// 可在失焦或确定时调用接口保存
		const res =await modifyResumeList({resumeId:resumeListWithAll.value[currentResumeIdx.value].resumeId,userId:uni.getStorageSync('loginInfo').user.userId,resumeName:val})
		if (res.code==200) {
			resumeListWithAll.value[currentResumeIdx.value].resumeName = val
		}
	}
	const handleAllResume = () => {
		uni.navigateTo({ url: '/pages/my/resume' })
	}

	onMounted(() => {
		// 获取状态栏高度
		const systemInfo = uni.getSystemInfoSync()
		statusBarHeight.value = systemInfo.statusBarHeight
		
		// 加载模板数据
		templateStore.loadFromStorage()
	})

	onShow(() => {
		fetchResumeList()
	})
	
	// 设置当前分类
	const setCategory = (category) => {
		currentCategory.value = category
		// 在切换分类时提供震动反馈
		uni.vibrateShort({
			success: () => {}
		})
	}
	
	// 设置当前过滤器
	const setFilter = (filter) => {
		currentFilter.value = filter
		// 在切换过滤器时提供震动反馈
		uni.vibrateShort({
			success: () => {}
		})
	}

	// 数字格式化，例如：1000 -> 1,000
	const formatNumber = (num) => {
		return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") + "万"
	}

	// 导航到模板列表
	const navigateToTemplateList = () => {
		uni.switchTab({
			url: '/pages/template/list'
		})
	}

	// 导航到模板详情
	const navigateToDetail = (id) => {
		uni.navigateTo({
			url: `/pages/template/detail?id=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.index-container {
		min-height: 100vh;
		background-color: #f5f7fb;
		
		.search-bar {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			padding: 0 15px;
			height: 30px;
			
			text {
				font-size: 12px;
				color: #fff;
				background: rgba(0, 0, 0, 0.2);
				padding: 3px 8px;
				border-radius: 15px;
			}
		}
		
		.content {
			padding: 0;
			position: relative;
			
			.banner {
				width: 100%;
				height: 200px;
				background: linear-gradient(135deg, #7396ff 0%, #b1c1ff 100%);
				border-radius: 0 0 16px 16px;
				margin-bottom: 10px;
				box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
				overflow: hidden;
				position: relative;
				
				.banner-content {
					display: flex;
					align-items: center;
					height: 100%;
					padding: 0 20px;
					
					.resume-icon {
						width: 110px;
						height: 110px;
						position: relative;
						
						image {
							width: 100%;
							height: 100%;
						}
					}
					
					.banner-text {
						flex: 1;
						color: #fff;
						margin-left: 20px;
						
						.main-text {
							font-size: 26px;
							font-weight: 500;
							margin-bottom: 5px;
						}
						
						.sub-text {
							font-size: 32px;
							font-weight: bold;
							margin-bottom: 10px;
						}
						
						.action-text {
							font-size: 15px;
							opacity: 0.9;
						}
					}
				}
			}
			
			.stats {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 8px 0;
				margin-bottom: 12px;
				
				text {
					font-size: 14px;
					color: #666;
				}
				
				.divider {
					margin: 0 12px;
					color: #ccc;
				}
			}
			
			.category-tabs {
				display: flex;
				justify-content: space-around;
				background-color: #fff;
				padding: 14px 0;
				border-radius: 12px;
				margin: 0 16px 16px;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
				
				.tab-item {
					display: flex;
					flex-direction: column;
					align-items: center;
					position: relative;
					transition: all 0.3s ease;
					
					&::after {
						content: '';
						position: absolute;
						bottom: -10px;
						left: 50%;
						transform: translateX(-50%) scaleX(0);
						width: 20px;
						height: 3px;
						background-color: #5ac725;
						transition: transform 0.3s ease;
					}
					
					text {
						font-size: 15px;
						color: #333;
						margin-bottom: 4px;
					}
					
					.count {
						font-size: 13px;
						color: #999;
					}
					
					&.active {
						text {
							color: #5ac725;
							font-weight: 500;
						}
						
						.count {
							color: #5ac725;
						}
						
						&::after {
							transform: translateX(-50%) scaleX(1);
						}
					}
				}
			}
			
			.action-buttons {
				display: flex;
				justify-content: space-between;
				margin: 0 16px 16px;
				
				.recommendation-btn, .unlock-btn, .popular-btn {
					display: flex;
					align-items: center;
					padding: 6px 10px;
					border-radius: 30px;
					background-color: #fff;
					box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
					transition: all 0.3s ease;
					
					text {
						font-size: 13px;
						color: #333;
						margin-left: 4px;
					}
					
					&.active {
						background-color: #333;
						
						text {
							color: #fff;
						}
					}
				}
				
				.recommendation-btn {
					background-color: #333;
					
					text {
						color: #fff;
					}
					
					&:not(.active) {
						background-color: #fff;
						
						text {
							color: #333;
						}
					}
				}
			}
			
			.creation-box {
				display: flex;
				flex-direction: column;
				margin: 0 16px 20px;
				border-radius: 12px;
				overflow: hidden;

				.creation-box-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					width: 100%;
					gap: 20px;
					margin-bottom: 15px;
				}

				.creation-box-list {
					// display: flex;
					// flex-wrap: wrap;
					// gap: 15px;
					margin-top: 10px;
					
					.creation-box-list-item {
						// width: calc(50% - 8px);
						background: #fff;
						border-radius: 12px;
						overflow: hidden;
						box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
						transition: all 0.3s ease;
						position: relative;
						margin-bottom: 10px;
						padding: 10px;
						
						&:active {
							transform: scale(0.98);
							box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1);
						}
						
						.creation-box-list-item-img {
							height: 120px;
							display: flex;
							justify-content: center;
							align-items: center;
							background: #f9f9f9;
							
							image {
								width: 100%;
								height: 100%;
								object-fit: cover;
							}
						}
						
						.creation-box-list-item-text {
							// padding: 10px;

							.resume-title {
								font-size: 16px;
								font-weight: bold;
								color: #333;
								margin-bottom: 8px;
							}
							.resume-info {
								font-size: 14px;
								color: #666;
								margin-bottom: 6px;
							}
							.resume-time {
								font-size: 12px;
								color: #999;
								margin-bottom: 10px;
							}
							
							text {
								font-size: 14px;
								font-weight: 500;
								color: #333;
								display: block;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
						
						.creation-box-list-actions {
							// position: absolute;
							// bottom: 10px;
							// right: 10px;
							display: flex;
							gap: 8px;
							justify-content: flex-end;
							
							.resume-more-text {
								background-color: #f2f2fd;
								font-size: 12px;
								color: #3b66c4;
								padding: 2px 8px;
								border-radius: 4px;
								display: flex;
								align-items: center;
								justify-content: center;
							}

							.action-btn {
								width: 30px;
								height: 30px;
								display: flex;
								justify-content: center;
								align-items: center;
								background: rgba(255, 255, 255, 0.9);
								border-radius: 50%;
								box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
								
								&:active {
									transform: scale(0.95);
								}
							}
						}
					}
				}

				.create-btn-add {
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(135deg, #f0fbfc 0%, #e0f5f7 100%);
					width: 100%;
					padding: 12px 0;
					border-radius: 10px;
					border: 1px solid #e7f0f2;
					box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
					transition: all 0.3s ease;
					
					&:active {
						transform: scale(0.98);
						box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
					}
					
					text {
						color: #000;
						font-size: 16px;
						font-weight: 700;
						margin-right: 5px;
					}
				}

				.create-btn-all {
					display: flex;
					justify-content: center;
					align-items: center;
					background: linear-gradient(135deg, #f0fbfc 0%, #e0f5f7 100%);
					width: 100%;
					padding: 12px 0;
					border-radius: 10px;
					border: 1px solid #e7f0f2;
					box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
					transition: all 0.3s ease;
					
					&:active {
						transform: scale(0.98);
						box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
					}
					
					text {
						color: #000;
						font-size: 16px;
						font-weight: 700;
					}
				}
				
				.create-icon {
					width: 100px;
					height: 130px;
					position: relative;
					background-color: #fff;
					display: flex;
					justify-content: center;
					padding: 50rpx;
					box-sizing: border-box;
					
					image {
						width: 50px;
						height: 50px;
					}
					
					.create-btn {
						position: absolute;
						bottom: 15px;
						display: flex;
						align-items: center;
						background-color: #222;
						padding: 6px 12px;
						border-radius: 20px;
						
						text {
							color: #fff;
							font-size: 14px;
							font-weight: bold;
						}
						
						image {
							width: 14px;
							height: 14px;
							margin-left: 4px;
						}
					}
				}
				
				.resume-list-showcase {
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					padding: 10px;
					
					.resume-swiper {
						width: 100%;
						height: 120px;
						.resume-item {
							margin: 0 5px;
							background: #fff;
							border-radius: 8px;
							box-shadow: 0 2px 8px rgba(0,0,0,0.06);
							padding: 16px;
							min-width: 180px;
							.resume-title {
								font-size: 16px;
								font-weight: bold;
								color: #333;
								margin-bottom: 8px;
							}
							.resume-info {
								font-size: 14px;
								color: #666;
								margin-bottom: 6px;
							}
							.resume-time {
								font-size: 12px;
								color: #999;
								margin-bottom: 10px;
							}
						}
					}
				}
				
				.resume-list-empty {
					flex: 1;
					color: #999;
					text-align: center;
					padding: 20px 0;
				}
			}
			
			.templates {
				margin: 0 16px 80px;
				
				.template-grid {
					display: flex;
					flex-direction: column;
					gap: 16px;
					
					.template-item {
						width: 100%;
						background-color: #fff;
						border-radius: 8px;
						overflow: hidden;
						box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
						
						image {
							width: 100%;
							height: 200px;
							object-fit: cover;
						}
						
						.template-label {
							padding: 10px 12px;
							
							text {
								font-size: 14px;
								color: #333;
								font-weight: 500;
							}
							
							.template-tags {
								display: flex;
								margin-top: 6px;
								
								.tag {
									font-size: 12px;
									color: #666;
									background-color: #f5f5f5;
									padding: 2px 8px;
									border-radius: 4px;
									margin-right: 8px;
								}
							}
						}
					}
				}
			}
		}
	}
	
	.resume-more {
		display: flex;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;

		.resume-more-text {
			background-color: #f2f2fd;
			font-size: 12px;
			color: #3b66c4;
			padding: 2px 8px;
			border-radius: 4px;
		}
	}
	.all-resume-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		color: #5ac725;
		font-size: 18px;
		.all-resume-icon {
			font-size: 32px;
			margin-bottom: 8px;
		}
	}
	.popup-content {
		padding: 24px 20px 0 20px;
		.popup-title {
			font-size: 18px;
			font-weight: bold;
			margin-bottom: 18px;
		}
		.popup-card {
			border: 1px solid #f3f3f3;
			border-radius: 10px;
			margin-bottom: 18px;
			padding: 20px;
			text {
				margin-right: 8px;
			}
		}
		.popup-actions {
			border: 1px solid #f3f3f3;
			border-radius: 10px;
			padding: 20px;
			
			.marbtn, .danger {
				display: flex;
				align-items: center;
				
				:deep(uni-icons) {
					display: flex;
					align-items: center;
					margin-right: 5px;
				}
			}

			.marbtn {
				margin-bottom: 20px;
			}
		}
	}
	.creation-box-empty {
		width: 100%;
		height: 180px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
		
		text {
			margin-top: 10px;
			font-size: 14px;
			color: #999;
		}
	}
</style>